<template>
  <div class="myAllMessage">
    <div class="myMessage" @click="btn">
      <el-tabs
          :tab-position="tabPosition"
          style="height: 650px;"
          v-model="activeName">
        <el-tab-pane label="人心中心" name="1">
          <h2 >个人信息</h2>
          <div class="left1">
            <h4>昵称 <span class="regin" @click="Modify1">修改</span></h4>
             <span style="margin-left: 60px">{{userInfos.nickname}}</span>
          </div>
          <div class="left2">
            <h4>手机号 <span class="regin">修改</span></h4>
            <span style="margin-left: 60px">{{userInfos.mobile}}</span>
          </div>
          <div class="left3">
            <h4>密码 <span class="regin">修改</span></h4>
            <span style="margin-left: 60px">*********</span>
          </div>
          <div class="left3">
            <div class="img">
<!--              <img src="../../../assets/img/timg1.jpg" alt="">-->
            </div>
            <input type="file" style="display: none">
            <button>
<!--              <img src="../../../assets/img/上传.png" alt="">-->
              <span>更换头像</span>
            </button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的课程" name="2">

        </el-tab-pane>
        <el-tab-pane label="我的订单" name="3">

        </el-tab-pane>
      </el-tabs>
    </div>



    <div>
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
        <input type="text">
        <button @click="mm">修改</button>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import {modifyNickname} from "@/api/user-api";

export default {
  name: "MyMessageIndex",
  components:{

  },
  data() {
    return {
      tabPosition: 'left',
      activeName: '1',
      dialogVisible:true,
      text:''
    }
  },
  created() {
    console.log(this.$route.query.e)
  },
  methods: {
    btn() {
     this.activeName=this.$route.query.e;
    },
    Modify1(){
      this.dialogVisible=true

    },
    mm(){
      modifyNickname().then(res=>{
        console.log(res)
        this.$store.commit.userInfos.nickname=this.text;
      })
    }

  },
  computed: {
    ...mapState(['userInfos'])
  },
  watch:{
    $route(to){
      this.activeName = to.query.e
    }

  }
}
</script>

<style scoped lang="less">

.myMessage{
  width: 1200px;
  margin: auto;
  position: absolute;
  left: 6%;
  top: 20%;
  background-color: white;

  h4 {
    font-weight: normal;
    font-size: 21px;
    margin-left: 50px;

    .regin {
      font-size: 14px;
      color: #00cf8c;
    }
  }
}


.left1 {
  padding-bottom: 25px;
  border-bottom: 1px solid silver;
}

.left2 {
  padding-bottom: 25px;
  border-bottom: 1px solid silver;
}

.left3 {
  padding-bottom: 25px;
  border-bottom: 1px solid silver;
  position: relative;

  input {
    width: 150px;
    height: 25px;
    border: 0;
    outline: none;
    border: 1px solid #00cf8c;
    color: #00cf8c;

  }

  .img {
    height: 180px;
    width: 160px;
    margin: 20px 10px 20px 20px;

    img {
      width: 100%;
    }
  }

  button {
    height: 29px;
    width: 90px;
    line-height: 15px;
    position: absolute;
    left: 41px;
    top: 152px;
    border: 0;
    outline: 0;

    img {
      margin-top: 5px;
      margin-right: 5px;
    }
  }

  button:hover {
    border: 1px solid #00cf8c;
    color: #00cf8c;
  }
}
</style>